home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / tydhtml / dyn.exe / CHAP10 / dyn10_4.txt < prev    next >
Encoding:
Text File  |  1997-10-02  |  4.5 KB  |  120 lines
  1. <HTML>
  2.  
  3. <HEAD>
  4.  
  5. </HEAD>
  6.  
  7. <BODY BACKGROUND="water.jpg" TEXT=#FFFFFF LINK=FFFF22 VLINK=FF22FF>
  8.  
  9. <H2>Squid Tracking -- How Do We Do It?</H2>
  10.  
  11. <TABLE>
  12.  
  13. <TR><TD WIDTH=320>
  14.  
  15. <DIV ID=AnimDiv STYLE="position:relative;width:320px;height:320px">
  16.  
  17. <IMG SRC="sonard.gif" ID=sonard BORDER=0
  18.  
  19.  STYLE="container:positioned;position:absolute;
  20.  
  21.  TOP:0pt;LEFT:150px;WIDTH:32px;HEIGHT:32px;ZINDEX:0;">
  22.  
  23. <IMG SRC="sonaru.gif" ID=sonaru BORDER=0
  24.  
  25.  STYLE="container:positioned;position:absolute;
  26.  
  27.  TOP:0pt;LEFT:150px;WIDTH:32px;HEIGHT:32px;ZINDEX:0;">
  28.  
  29. <IMG SRC="squid2.gif" ID=squid1 BORDER=0 onclick="Guess();"
  30.  
  31.  STYLE="container:positioned;position:absolute;
  32.  
  33.  TOP:170pt;LEFT:20px;WIDTH:64px;HEIGHT:64px;ZINDEX:1;">
  34.  
  35. <IMG SRC="squid2.gif" ID=squid2 BORDER=0 onclick="Guess();"
  36.  
  37.  STYLE="container:positioned;position:absolute;
  38.  
  39.  TOP:190pt;LEFT:20px;WIDTH:64px;HEIGHT:64px;ZINDEX:2;">
  40.  
  41. <IMG SRC="squid2.gif" ID=squid3 BORDER=0 onclick="Guess();"
  42.  
  43.  STYLE="container:positioned;position:absolute;
  44.  
  45.  TOP:180pt;LEFT:0px;WIDTH:64px;HEIGHT:64px;ZINDEX:3;">
  46.  
  47. <IMG SRC="boat.jpg" BORDER=0 STYLE="container:positioned;position:absolute;
  48.  
  49.  TOP:0pt;LEFT:0px;WIDTH:320px;HEIGHT:50px;ZINDEX:5;" onclick="cycle();">
  50.  
  51. <IMG SRC="bottom.gif" BORDER=0 STYLE="container:positioned;position:absolute;
  52.  
  53.  TOP:240pt;LEFT:0px;WIDTH:320px;HEIGHT:50px;ZINDEX:5;">
  54.  
  55. </DIV></TD><TD>
  56.  
  57. <FONT COLOR=#FFFF00><I>To track squid we use a sophisticated sonar device
  58.  
  59.  that emits sound waves down into the ocean
  60.  
  61. from the surface.  The sound waves will either bounce off the ocean floor
  62.  
  63. or bounce off the squid if they get between the emitting boat and the 
  64.  
  65. ocean floor. We get very precise images of each squid that gets in the way of 
  66.  
  67. the sound waves.  In fact, we can identify each squid as an individual unique 
  68.  
  69. from all squid we have catalogued.</I></FONT><BR>
  70.  
  71. <B>Go ahead and click on the boat to start an animation.</B>
  72.  
  73. </TD></TR></TABLE>
  74.  
  75. <OBJECT ID="pathone"
  76.  
  77.         CLASSID="CLSID:E0E3CC60-6A80-11D0-9B40-00A0C903AA7F">
  78.  
  79. <PARAM NAME=XSeries
  80.  
  81.         VALUE="0,20;10,50;20,80;30,115;40,150;50,185;60,220;70,255;80,300">
  82.  
  83. <PARAM NAME=YSeries
  84.  
  85.         VALUE="0,170;10,170;20,170;30,170;40,170;50,170;60,170;70,170;80,170">
  86.  
  87. </OBJECT>
  88.  
  89. <OBJECT ID="pathtwo"
  90.  
  91.         CLASSID="CLSID:E0E3CC60-6A80-11D0-9B40-00A0C903AA7F">
  92.  
  93. <PARAM NAME=XSeries
  94.  
  95.         VALUE="0,20;10,55;20,80;30,110;40,135;50,170;60,200;70,230;80,270">
  96.  
  97. <PARAM NAME=YSeries
  98.  
  99.         VALUE="0,190;10,190;20,193;30,195;40,197;50,194;60,192;70,190;80,190">
  100.  
  101. </OBJECT>
  102.  
  103. <OBJECT ID="paththree"
  104.  
  105.         CLASSID="CLSID:E0E3CC60-6A80-11D0-9B40-00A0C903AA7F">
  106.  
  107. <PARAM NAME=XSeries
  108.  
  109.         VALUE="0,0;10,20;20,50;30,80;40,100;50,128;60,148;70,178;80,210">
  110.  
  111. <PARAM NAME=YSeries
  112.  
  113.         VALUE="0,180;10,182;20,185;30,190;40,185;50,181;60,179;70,176;80,179">
  114.  
  115. </OBJECT>
  116.  
  117. <OBJECT ID="pathfour"
  118.  
  119.         CLASSID="CLSID:E0E3CC60-6A80-11D0-9B40-00A0C903AA7F">
  120.  
  121. <PARAM NAME=XSeries
  122.  
  123.         VALUE="0,150;10,150;20,150;30,150;40,150;50,150;60,150;70,150;80,150">
  124.  
  125. <PARAM NAME=YSeries
  126.  
  127.         VALUE="0,20;10,50;20,90;30,135;40,180;41,0">
  128.  
  129. </OBJECT>
  130.  
  131. <OBJECT ID="pathfive"
  132.  
  133.         CLASSID="CLSID:E0E3CC60-6A80-11D0-9B40-00A0C903AA7F">
  134.  
  135. <PARAM NAME=XSeries
  136.  
  137.         VALUE="0,150;10,150;20,150;30,150;40,150;50,150;60,150;70,150;80,150">
  138.  
  139. <PARAM NAME=YSeries
  140.  
  141.         VALUE="40,0;41,180;50,135;60,90;70,50;80,20">
  142.  
  143. </OBJECT>
  144.  
  145. <SCRIPT LANGUAGE=VBScript>
  146.  
  147. function cycle()
  148.  
  149.         dim itimer
  150.  
  151.         pathone.Target = squid1.Style
  152.  
  153.         pathtwo.Target = squid2.Style
  154.  
  155.         paththree.Target = squid3.Style
  156.  
  157.         pathfour.Target = sonard.Style
  158.  
  159.         pathfive.Target = sonaru.Style
  160.  
  161.         squid1.style.visibility="visible"
  162.  
  163.         squid2.style.visibility="visible"
  164.  
  165.         squid3.style.visibility="visible"
  166.  
  167.         sonard.style.visibility="visible"
  168.  
  169.         sonaru.style.visibility="visible"
  170.  
  171.         pathone.Play
  172.  
  173.         pathtwo.Play
  174.  
  175.         paththree.Play
  176.  
  177.         pathfour.Play
  178.  
  179.         pathfive.Play
  180.  
  181.         itimer = setTimeout( "Moves()", 50)
  182.  
  183. End function
  184.  
  185.  
  186.  
  187. Sub Moves
  188.  
  189.         dim itimer
  190.  
  191.         pathone.Tick
  192.  
  193.         pathtwo.Tick
  194.  
  195.         paththree.Tick
  196.  
  197.         pathfour.Tick
  198.  
  199.         pathfive.Tick
  200.  
  201.         if currentTick < 9 then
  202.  
  203.             itimer = setTimeout("Moves()", 50)
  204.  
  205.         end if
  206.  
  207. End Sub
  208.  
  209. </SCRIPT>
  210.  
  211.  
  212.  
  213. <SCRIPT LANGUAGE=VBScript>
  214.  
  215. function Guess()
  216.  
  217.   dim r, srcElement
  218.  
  219.   set srcElement = window.event.srcElement
  220.  
  221.   if (srcElement.id="squid1") then
  222.  
  223.      srcElement.src = "gem.gif"
  224.  
  225.   else
  226.  
  227.      srcElement.src = "wrong.gif"
  228.  
  229.   end if
  230.  
  231. end function
  232.  
  233. </SCRIPT>
  234.  
  235. </BODY>
  236.  
  237. </HTML>
  238.  
  239.